import React, {FunctionComponent, useEffect} from 'react';
import {Button, Card, Col, Divider, Form, Row, Space} from 'antd';
import {createRespResult, KfBizQuickFormProps, KfFloatingContextProps, KfInput, KfModal, KfQuickForm, KfSwitch, KfTextArea} from 'kf-web-library';
import * as API from '@/services';
import { CloseOutlined, DeleteOutlined, PlusOutlined } from '@ant-design/icons';

const FormItem = Form.Item;

type DataFormProps = {} & KfFloatingContextProps;
const QuickForm: FunctionComponent<DataFormProps> = (props) => {
  const { ...rest } = props;
  const [formInstance] = Form.useForm();
  return (
    <KfQuickForm

      formType={'modify'}
      formProps={{
        form: formInstance,
        labelCol: {
          flex: '0 0 140px',
        },
        wrapperCol: {
          flex: '1',
        },
      }}
      queryRequest={{
        modify: true,
        create: true,
      }}
      defaultQueryRequest={() => API.querySiteAboutInfo()}
      submitRequest={{
        modify: (formValues) => {
          return API.patchSiteAboutInfo({
            siteNumber: formValues.siteNumber,
          });
        },
      }}
      {...rest}
    >
      <Form.List name="siteNumber">
        {(fields, { add, remove }) => {
          return (
            <>
              {fields.map(({ key, name, ...restField }, index) => {
                return (
                  <Card
                    className={"hxform-list-item"}
                    size="small"
                    title={`第${index + 1}个`}
                    key={key}
                    extra={
                      <DeleteOutlined
                        onClick={() => {
                          KfModal.confirm2("你确定要删除吗",null,()=>{
                            remove(name);
                          })
                        }}
                      />
                    }
                  >
                    <Form.Item {...restField} name={[name, 'nameCn']} label={'备案/审核号_中文'} rules={[{ required: true }]}>
                      <KfInput/>
                    </Form.Item>
                    <Form.Item {...restField} name={[name, 'nameEn']} label={'备案/审核号_英文'} rules={[{ required: false }]}>
                      <KfInput/>
                    </Form.Item>
                    <Form.Item {...restField} name={[name, 'url']} label={'跳转地址'} rules={[{ required: false }]}>
                      <KfInput placeholder="https://xxxxx" />
                    </Form.Item>
                  </Card>
                );
              })}

              <Form.Item className={"hxform-list-action-item"}>
                <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
                  添加 备案/审核号
                </Button>
              </Form.Item>
            </>
          );
        }}
      </Form.List>
    </KfQuickForm>
  );
};
export default QuickForm;
